<template>
  <div class="app-container">
    <!-- <div class="nav">
      <el-button icon="el-icon-view" >分享</el-button>
    </div>-->
    <div class="content">
      <div class="panel">
        <div class="title">
          <div class="right">
            <img src="/static/img/logo1.4e84ae0f.png" style="width: 80px" />
          </div>
        </div>
        <div class="showPanel">
          <div class="leftImg">
            <img
              v-if="projectShowDetailInfo.projectMain"
              :src="projectShowDetailInfo.projectMain.storagePath"
            />
          </div>
          <div class="rightInfo">
            <div class="line1">
              <!--<i class="el-icon-folder" />-->
              <img src="@/assets/image/title1.png" width="20px" />
              <label>{{ projectShowDetailInfo.showProjectName }}</label>
            </div>
            <div class="line2">
              <div class="tag"></div>
              <label>项目概况</label>
            </div>
            <div class="line3">
              {{ projectShowDetailInfo.projectDesc
              }}
            </div>
          </div>
        </div>
      </div>
      <div class="tabletitle">
        <el-row :gutter="20">
          <div class="nav">
            <div class="left">
              <div class="tag"></div>
              <div class="label">项目基本信息</div>
            </div>
            <div class="right" v-if="showinfo0" @click="changeshow0">
              <div class="label">收起</div>
              <div class="icon">▲</div>
            </div>
            <div class="right" v-if="!showinfo0" @click="changeshow0">
              <div class="label">展开</div>
              <div class="icon">▼</div>
            </div>
          </div>
          <el-row :gutter="24" v-if="showinfo0">
            <el-col :span="8" v-if="projectShowDetailInfo.code">
              <div class="input-wrap">
                <div class="input-label">项目代码</div>
                <div class="input-content">
                  <el-input
                    type="textarea"
                    autosize
                    v-model="projectShowDetailInfo.code"
                    :disabled="!isEdit"
                  />
                </div>
              </div>
            </el-col>
            <el-col :span="8" v-if="showFlag && projectShowDetailInfo.party">
              <div class="input-wrap">
                <div class="input-label">委托单位</div>
                <div class="input-content">
                  <el-input
                    type="textarea"
                    autosize
                    v-model="projectShowDetailInfo.party"
                    :disabled="!isEdit"
                  />
                </div>
              </div>
            </el-col>
            <el-col :span="8" v-if="projectShowDetailInfo.status">
              <div class="input-wrap">
                <div class="input-label">项目进展</div>
                <div class="input-content">
                  <el-select
                    v-model="projectShowDetailInfo.status"
                    placeholder="请选择项目进展"
                    :disabled="!isEdit"
                  >
                    <el-option
                      v-for="dict in statusOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                      :disabled="dict.dictValue === '6' ? true : false"
                    />
                  </el-select>
                </div>
              </div>
            </el-col>
            <el-col :span="24" v-if="projectShowDetailInfo.useBusinessCategory">
              <div class="input-wrap">
                <div class="input-label">服务类别</div>
                <div class="input-content">
                  <el-input
                    type="textarea"
                    autosize
                    v-model="projectShowDetailInfo.useBusinessCategory"
                    :disabled="!isEdit"
                  />
                </div>
              </div>
            </el-col>
            <el-col :span="8" v-if="showFlag && projectShowDetailInfo.startDate">
            <div class="input-wrap">
              <div class="input-label">开始服务日期</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.startDate"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="showFlag && projectShowDetailInfo.endDate">
            <div class="input-wrap">
              <div class="input-label">完成服务日期</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.endDate"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="projectShowDetailInfo.areaName">
            <div class="input-wrap">
              <div class="input-label">所在地区</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.areaName"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="showFlag && projectShowDetailInfo.address">
            <div class="input-wrap">
              <div class="input-label">项目地址</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.address"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="showFlag && projectShowDetailInfo.investment">
            <div class="input-wrap">
              <div class="input-label">项目总投资(万元)</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.investment"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="projectShowDetailInfo.industrys">
            <div class="input-wrap">
              <div class="input-label">所属行业</div>
              <div class="input-content">
                <el-cascader
                  v-model="projectShowDetailInfo.industrys"
                  :options="industryOptions"
                  filterable
                  clearable
                  :props="{ value: 'id', checkStrictly: true }"
                  style="width: 100%"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col
            :span="8"
            v-if="showFlag && projectShowDetailInfo.constructionType"
          >
            <div class="input-wrap">
              <div class="input-label">建设类型</div>
              <div class="input-content">
                <el-select
                  v-model="projectShowDetailInfo.constructionType"
                  placeholder="请选择建设类型"
                  :disabled="!isEdit"
                  clearable
                >
                  <el-option label="新建" value="0" />
                  <el-option label="改扩建" value="1" />
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="projectShowDetailInfo.content">
            <div class="input-wrap">
              <div class="input-label">建设内容及规模</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.content"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col
            :span="24"
            v-if="showFlag && projectShowDetailInfo.mainServiceContent"
          >
            <div class="input-wrap">
              <div class="input-label">服务内容</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.mainServiceContent"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          </el-row>

          <!--<el-col :span="24" v-if="showFlag && projectShowDetailInfo.businessCategory">
            <div class="input-wrap">
              <div class="input-label">包含业务类别</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.businessCategory"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>-->
          

          <el-col
            :span="24"
            v-if="showFlag && projectShowDetailInfo.showProjectMember"
          >
            <div class="input-wrap">
              <div class="input-label">服务团队</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.showProjectMember"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col
            :span="24"
            v-if="showFlag && projectShowDetailInfo.specEffect"
          >
            <div class="input-wrap">
              <div class="input-label">项目特点与成效</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.specEffect"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="projectShowDetailInfo.showHonor">
            <div class="input-wrap">
              <div class="input-label">项目所获荣誉</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.showHonor"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="engineerings">
            <div class="input-wrap">
              <div class="input-label">项目特征</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="engineerings"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col
            :span="24"
            v-if="showFlag && projectShowDetailInfo.bmsAttachments.length > 0"
          >
            <div class="input-wrap">
              <div class="input-label">项目图片</div>
            </div>
          </el-col>
          <el-col :span="24">
            <div
              v-if="projectShowDetailInfo.bmsAttachments.length > 0"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <div
                v-if="currentIndex <= 0"
                style="
                  font-size: 20px;
                  background-color: #ddd;
                  color: #999;
                  opacity: 0.3;
                  cursor: pointer;
                  padding: 20px 10px;
                "
              >
                ◀
              </div>
              <div
                v-if="currentIndex > 0"
                style="
                  font-size: 20px;
                  background-color: #f3f6fa;
                  color: #8a8ec4;
                  cursor: pointer;
                  padding: 20px 10px;
                "
                @click="setCurrent(currentIndex - 1)"
              >
                ◀
              </div>
              <div
                style="
                  width: 90%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <div
                  v-if="currentIndex >= 1"
                  style="width: 30%"
                  @click="setCurrent(currentIndex - 1)"
                >
                  <img
                    :src="
                      projectShowDetailInfo.bmsAttachments[currentIndex - 1]
                        .storagePath
                    "
                  />
                </div>
                <div v-if="currentIndex < 1" style="width: 30%"></div>
                <div style="width: 35%">
                  <img
                    :src="
                      projectShowDetailInfo.bmsAttachments[currentIndex]
                        .storagePath
                    "
                  />
                </div>
                <div
                  v-if="
                    currentIndex <=
                    projectShowDetailInfo.bmsAttachments.length - 2
                  "
                  style="width: 30%"
                  @click="setCurrent(currentIndex + 1)"
                >
                  <img
                    :src="
                      projectShowDetailInfo.bmsAttachments[currentIndex + 1]
                        .storagePath
                    "
                  />
                </div>
                <div
                  v-if="
                    currentIndex >
                    projectShowDetailInfo.bmsAttachments.length - 2
                  "
                  style="width: 30%"
                ></div>
              </div>
              <div
                v-if="
                  currentIndex >=
                  projectShowDetailInfo.bmsAttachments.length - 1
                "
                style="
                  font-size: 20px;
                  background-color: #ddd;
                  color: #999;
                  opacity: 0.3;
                  cursor: pointer;
                  padding: 20px 10px;
                "
              >
                ▶
              </div>
              <div
                v-if="
                  currentIndex < projectShowDetailInfo.bmsAttachments.length - 1
                "
                style="
                  font-size: 20px;
                  background-color: #f3f6fa;
                  color: #8a8ec4;
                  cursor: pointer;
                  padding: 20px 10px;
                "
                @click="setCurrent(currentIndex + 1)"
              >
                ▶
              </div>
            </div>
          </el-col>
          <el-col
            :span="24"
            style="display: flex; justify-content: center; align-items: center"
          >
            <div
              v-for="(item, index) in projectShowDetailInfo.bmsAttachments"
              :key="index"
              style="padding: 4px; cursor: pointer"
              @click="setCurrent(index)"
            >
              <div
                v-show="index == currentIndex"
                style="
                  width: 20px;
                  height: 6px;
                  border-radius: 3px;
                  background-color: #4b91fb;
                "
              ></div>
              <div
                v-show="index != currentIndex"
                style="
                  width: 20px;
                  height: 6px;
                  border-radius: 3px;
                  background-color: #d4d8dc;
                "
              ></div>
            </div>
          </el-col>
          <el-col
            :span="24"
            v-if="showFlag && projectShowDetailInfo.projectAtts.length > 0"
          >
            <div class="input-wrap">
              <div class="input-label">附件</div>
              <div class="input-content">
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: #fafbfc;
                    padding: 10px;
                    margin: 2px;
                  "
                  :key="index"
                  v-for="(item, index) in projectShowDetailInfo.projectAtts"
                >
                  <div
                    style="
                      width: 80%;
                      height: 22px;
                      opacity: 1;
                      font-size: 14px;
                      font-family: PingFangSC, PingFangSC-Regular;
                      font-weight: 400;
                      text-align: left;
                      color: #596174;
                      line-height: 22px;
                    "
                  >
                    {{ item.fileName }}
                  </div>
                  <div
                    style="
                      width: 20%;
                      display: flex;
                      justify-content: flex-end;
                      align-items: center;
                    "
                  >
                    <el-button
                      icon="el-icon-view"
                      size="mini"
                      style="margin-right: 30px"
                      @click="preview(item)"
                      >预览</el-button
                    >
                    <!-- <el-button
                      icon="el-icon-download"
                      size="mini"
                      style="margin-right: 30px"
                      @click="download(index)"
                      >下载</el-button>-->
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getProjectShowDetail } from "@/api/projectShowLibrary/projectShowLibrary";
import {
  listGeneral,
  updateGeneral,
  uploadImages,
  synchronizeProject,
} from "@/api/projectWorkbench/projectList/projectGeneral";
import { industryCategoryTreeTwo } from "@/api/industryCategory";
import {
  projectIndex,
  updateIndex,
  getIndicators,
} from "@/api/projectWorkbench/projectList/projectIndex";
export default {
  name: "ProjectShowDetailPage",
  components: {},
  data() {
    return {
      showinfo0: true,
      engineerings: undefined,
      engineeringsChildren: undefined,
      showFlag: false,
      dataTable: [],
      engineeringIds: [],
      industryOptions: [],
      statusOptions: [],
      currentIndex: 0,
      isEdit: false,
      projectShowDetailInfo: {},
    };
  },
  mounted() {},
  created() {
    const userInfo = JSON.parse(sessionStorage.getItem("userinfo") || {});
    console.log(userInfo.roles); //角色，"project_show_library_see"，"project_show_library_manager"
    console.log(userInfo.userName); //登录名
    if (userInfo.userName === "admin") {
      this.showFlag = true;
    }

    if (userInfo.roles.length > 0) {
      userInfo.roles.forEach((item) => {
        if (
          item.roleKey == "project_show_library_see" ||
          item.roleKey == "project_show_library_manager"
        ) {
          this.showFlag = true;
        }
      });
    }
    this.getIndex();
    this.getProjectInfo();
    this.getDicts("sys_project_status").then((response) => {
      this.statusOptions = response.data;
    });

    //行业类别
    industryCategoryTreeTwo().then((res) => {
      if (res.code === 200) {
        this.industryOptions = res.data;
      }
    });
  },
  methods: {
    getIndex() {
      this.engineeringIds = [];
      (this.performanceKeywordIds = []),
        (this.engineeringIds = []),
        (this.categorys = []),
        (this.categorysTwoIds = []),
        (this.categorysIds = []),
        (this.projectIndicators = []),
        (this.getProjectIndicators = []),
        (this.dataTable = []);
      this.form = {};
      projectIndex({ projectId: this.$route.query.guid }).then((res) => {
        this.dataTable = res;

        if(res.engineerings){
          res.engineerings = res.engineerings+"；";
        }
        if(res.engineeringsChildren){
          res.engineeringsChildren = res.engineeringsChildren+"；";
        }
        if(res.keyWords){
          res.keyWords = res.keyWords+"；";
        }
        this.engineerings = res.engineerings + res.engineeringsChildren + res.keyWords;



        res.bmsMdEngineeringCategorys
          .filter((item) => item.selected === true)
          .map((item) => {
            this.engineeringIds.push(item.engineeringId);
            // if (item.indicators.length > 0) {
            //   this.projectIndicators = this.projectIndicators.concat(
            //     item.indicators
            //   )
            // }
            if (item.children.length > 0) {
              this.categorys.push(item.children);
              item.children
                .filter((obj) => obj.selected === true)
                .map((obj) => {
                  this.categorysTwoIds.push(obj.engineeringId);
                  // this.projectIndicators = this.projectIndicators.concat(
                  //   obj.indicators
                  // )
                });
              item.children.map((obj) => {
                if (obj.children.length > 0) {
                  obj.children
                    .filter((obj) => obj.selected === true)
                    .map((obj) => {
                      this.categorysIds.push(obj.engineeringId);
                      // this.projectIndicators = this.projectIndicators.concat(
                      //   obj.indicators
                      // )
                    });
                }
              });
            }
          });

        res.bmsMdPerformanceKeywords
          .filter((item) => item.selected === true)
          .map((item) => {
            this.performanceKeywordIds.push(item.performanceKeywordId);
          });
      });
    },
    getProjectInfo() {
      listGeneral(this.$route.query.guid).then((res) => {
        if (res.code === 200) {
          this.projectShowDetailInfo = res.data;
          if (this.projectShowDetailInfo) {
            if (this.projectShowDetailInfo.isMember === "1") {
              this.showFlag = true;
            }
          }
          if (!this.projectShowDetailInfo.projectAtts) {
            this.projectShowDetailInfo.projectAtts = [];
          }
          if (this.projectShowDetailInfo.bmsAttachments.length > 1) {
            this.currentIndex = 1;
          }
        }
      });
    },
    shared() {},
    setCurrent(index) {
      this.currentIndex = index;
    },
    preview(item) {
      this.filePreview(item.fileName, item.storagePath);
    },
    download(index) {},
    changeshow0(){
      this.showinfo0=!this.showinfo0
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  background-color: #eee;
  padding: 0 !important;
}
.nav {
  border-bottom: 1px solid #d9dbdf;
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 20px 0;
  background-color: #fff;
}
.nav > .left {
  width: 90%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.nav > .left > .tag {
  display: inline-block;
  width: 4px;
  height: 10px;
  background: linear-gradient(212deg, #4a97ff 0%, #5073e6 86%);
}
.nav > .left > .label {
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #26314a;
  padding: 0 20px;
}
.nav > .right {
  width: 10%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  color: #596174;
}
.nav > .right > .icon {
  padding-left: 20px;
}
.content {
  padding: 5px 10%;
}
.panel {
  background-color: #fff;
  padding: 15px;
  //border-bottom: 1px solid #c3c6cb00;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 1;
  padding: 10px;
}
.title > .left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.title > .left > .item {
  padding-right: 40px;
}

.showPanel {
  background-color: #f2f7ff;
  border: 1px solid #d7d1ff;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.showPanel > .leftImg {
  width: 52%;
  height: 315px;
  border-radius: 4px;
  background-color: #000;
}
.showPanel > .leftImg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showPanel > .rightInfo {
  display: flexbox;
  width: 45%;
  height: 315px;
}
.showPanel > .rightInfo > .line1 {
  font-size: 24px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  padding: 5px 0;
}
.showPanel > .rightInfo > .line1 > i {
  background-color: #4554c5;
  color: #fff;
}
.showPanel > .rightInfo > .line1 > label {
  color: #4554c5;
}
.showPanel > .rightInfo > .line2 {
  padding: 5px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 18px;
  font-family: PingFangSC, PingFangSC-Regular;
}
.showPanel > .rightInfo > .line2 > .tag {
  width: 4px;
  height: 10px;
  margin-right: 10px;
  background-color: #4554c5;
}
.showPanel > .rightInfo > .line3 {
  width: 100%;
  height: 215px;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  color: #7b8290;
  font-size: 16px;
  line-height: 30px;
}
.el-col img {
  width: 100%;
  max-width: 100%;
}

.tabletitle {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  background-color: #fff;
  border-radius: 2px;
  .input-wrap {
    // padding: 8px;
    display: flex;

    .input-label {
      min-width: 1em;
      max-width: 9em;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      text-align: right;
      margin-right: 8px;
      margin-top: 9px;
      flex: 0 0 120px;
      font-weight: 400;
      font-size: 14px;
    }

    .input-content {
      -webkit-box-flex: 1;
      flex-grow: 1;
      /deep/.el-input__inner {
        font-family: PingFangSC-Regular;
        // font-size: 16px !important;
        color: #7b8290;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
      }
      .el-select {
        width: 100%;
      }
    }
  }
}
/deep/.el-input.is-disabled {
  .el-input__prefix {
    display: none;
  }
  .el-input__suffix {
    display: none;
  }
}

/deep/.el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border-color: #fff;
  color: #7b8290;
  cursor: auto;
  padding-left: 15px;
}
/deep/.el-input.is-disabled .el-input__inner:hover {
  background-color: #fff;
  border-color: #fff;
  color: #7b8290;
  cursor: auto;
}
/deep/.el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-moz-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-ms-input-placeholder {
  color: #fff;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  border-color: #fff;
  color: #7b8290;
  resize: none;
  cursor: auto;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder {
  color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder {
  color: #fff;
}

/deep/.el-carousel__arrow {
  background-color: rgba(31, 45, 61, 0.5);
  width: 56px;
  height: 56px;
  .el-icon-arrow-right:before {
    font-size: 18px;
  }
}
/deep/.el-carousel__container {
  height: 250px;
}
</style>